<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script src="http://cdn.sockjs.org/sockjs-0.3.min.js"></script>
<!-- <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js">    </script> -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
	<script type="text/javascript" src="assets/chart/canvasjs.min.js"></script>	
	<script type="text/javascript" src="assets/chart/canvasjs.js"></script>	
		<script src="js/stomp.js"></script>
  
  <script type="text/javascript">
	
	</script>
	
</head>
<body style="background: #9dd2ea;
	background: linear-gradient(#9dd2ea, #8bceec);">
<br/>
<br/>
Choose Symbol for which chart should be drawn:<br/>
<select id="prdid" name="prdid" onchange="callJS();"> 
			     <option selected>-Select-</option>
				 <option value="ALUMINIUM_L">ALUMINIUM L</option>
                 <option value="ALUMINIUM_S">ALUMINIUM S</option>
                 <option value="BRCRUDE_OIL">BRCRUDE OIL</option>
                 <option value="COPPER_L">COPPER L</option>
                 <option value="COPPER_S">COPPER S</option>
                 <option value="CRUDE_OIL">CRUDE OIL</option>
                 <option value="GOLD_L">GOLD L</option>
                 <option value="GOLD_S">GOLD S</option>
                 <option value="LEAD_L">LEAD L</option>
                 <option value="LEAD_S">LEAD S</option>
                 <option value="NATURAL_GAS">NATURAL GAS</option>
                 <option value="SILVER_L">SILVER L</option>
                 <option value="SILVER_S">SILVER S</option>
                 <option value="ZINC_L">ZINC L</option>
                 <option value="ZINC_S">ZINC S</option>
                 <option value="NICKEL_L">NICKEL L</option>
                 <option value="NICKEL_S">NICKEL S</option> 
                 </select>
        <input type="text" id="dpr" value="DPR"></input>
        <br/>
        <br/>
        <br/>
        <br/>
        <div id="chartContainer" style="height: 300px; width:100%;">
	</div>         
         <script>
					var id;
				function callJS(){
				id = document.getElementById('prdid').value;
				}

			var socket = new SockJS("/ncmxBtrade/hs");
		var stompClient = Stomp.over(socket);

		function renderQuote(frame) {
			
			var Headings = JSON.parse(frame.body);
			
			for ( var i in Headings) {
				var Heading = Headings[i];	
			if(Heading['symbol'] == id ){
			//	alert("Symbol is equal to Selectted ID");
				 $('#dpr').val(Heading.dpr);
				
		}
			}
		}
		
		
				
		var connectCallback = function() {
			stompClient.subscribe('/topic/Heading', renderQuote);
		};

		
		var errorCallback = function(error) {
			alert(error.headers.message);
		};

		
		stompClient.connect("guest", "guest", connectCallback, errorCallback);

		
		$('#prdid').change(function(event)  {
			var dps = []; // dataPoints
		    var chart = new CanvasJS.Chart("chartContainer",{
					title :{
						text: id+" Chart"
					},			
					data: [{
						type: "line",
						dataPoints: dps 
					}]
				});

				var xVal = 0;
				var yVal = 100;	
				var updateInterval = 50;
				var dataLength = 900; // number of dataPoints visible at any point

				var updateChart = function (count) {
					count = count || 1;
					// count is number of times loop runs to generate random dataPoints.
					
					for (var j = 0; j < count; j++) {	
						yVal = /* -yVal +  Math.round(5 + Math.random() *(-5-5)); */Number($( "#dpr" ).val());
						dps.push({
							x: xVal,
							y: yVal
						});
						xVal++;
					};
					if (dps.length > dataLength)
					{
						dps.shift();				
					}
					chart.render();		

				};

				// generates first set of dataPoints
				updateChart(dataLength); 

				// update chart after specified time. 
				setInterval(function(){updateChart();}, updateInterval); 

			});
		
	</script>
              
</body>
</html>